<!DOCTYPE html>
<html>
<head>
	<title>Sortable Table using Polymer Web Components</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<script src="../../platform/platform.js"></script>
	<link rel="import" href="../sortable-table.html">
	<link rel="import" href="fruit-icon.html">
	<link rel="import" href="index-links.html"><!--
	<link rel="stylesheet" href="../css/extjs.css" shim-shadowdom>
	<link rel="stylesheet" href="../css/bootstrap.css" shim-shadowdom>-->

	<style shim-shadowdom>
		sortable-table { width: 500px; margin-left: 65px; }
		sortable-table::shadow td.column-alice,
		sortable-table::shadow td.column-bill,
		sortable-table::shadow td.column-casey,
		sortable-table::shadow td.column-average,
		sortable-table::shadow td.column-total {
			text-align: right;
			padding-right: 5px;
			width: 100px;
			vertical-align: middle;
		}
	</style>
</head>
<body unresolved>
<!--
	<input type="radio" name="theme" onclick="" id="default" value="Default" onchange="change('')"><label for="default">Default</label>
	<input type="radio" name="theme" onclick="" id="extjs" value="ExtJS" onchange="change('extjs')"><label for="extjs">ExtJS</label>
	<input type="radio" name="theme" onclick="" id="bootstrap" value="Bootstrap" onchange="change('bootstrap')"><label for="bootstrap">Bootstrap</label>
<script>
function change(t){
	[].forEach.call(document.querySelectorAll('sortable-table'), function(element){
		element.classList.remove('extjs');
		element.classList.remove('bootstrap');
		if(t){
			element.classList.add(t);
			element.noStyle = true;
		}else element.noStyle = false;
	});
};
</script>
-->
	<h2>DOM Elements</h2>

	The <code>sortable-column</code> elements should work the same way as a <code>columns</code> array.

	<pre>
	&lt;sortable-table&gt;
		&lt;sortable-column name="fruit" cellTemplate="fruitsTemplate"&gt;Type of Fruit&lt;/sortable-column&gt;
		&lt;sortable-column name="alice"&gt;&lt;/sortable-column&gt;
		&lt;sortable-column name="bill"&gt;&lt;/sortable-column&gt;
		&lt;sortable-column name="casey"&gt;&lt;/sortable-column&gt;
		&lt;template id="fruitsTemplate"&gt;
			&lt;td&gt;
				&lt;fruit-icon fruit="{{value}}"&gt;&lt;/fruit-icon&gt; {{value}}
			&lt;/td&gt;
		&lt;/template&gt;
		[
			{ "fruit":"apple",	"alice": 4,	"bill": 10,	"casey": 2 },
			{ "fruit":"banana",	"alice": 0,	"bill": 4,	"casey": 0 },
			{ "fruit":"grape",	"alice": 2,	"bill": 3,	"casey": 5 },
			{ "fruit":"pear",	"alice": 4,	"bill": 2,	"casey": 8 },
			{ "fruit":"strawberry",	"alice": 0,	"bill": 14,	"casey": 0 }
		]
	&lt;/sortable-table&gt;
	</pre>

	<sortable-table defaultStyle class="panel panel-default x-panel x-grid x-panel-default-framed">
		<sortable-column name="fruit" cellTemplate="fruitsTemplate">Type of Fruit</sortable-column>
		<sortable-column name="alice"></sortable-column>
		<sortable-column name="bill"></sortable-column>
		<sortable-column name="casey"></sortable-column>
		<template id="fruitsTemplate">
			<td style="text-align:left">
				<fruit-icon fruit="{{value}}"></fruit-icon> {{value}}
			</td>
		</template>
		[
			{ "fruit":"apple",		"alice": 4,	"bill": 10,	"casey": 2 },
			{ "fruit":"banana",		"alice": 0,	"bill": 4,	"casey": 0 },
			{ "fruit":"grape",		"alice": 2,	"bill": 3,	"casey": 5 },
			{ "fruit":"pear",		"alice": 4,	"bill": 2,	"casey": 8 },
			{ "fruit":"strawberry",	"alice": 0,	"bill": 14,	"casey": 0 }
		]
	</sortable-table>

	<p>

	If data is only specified using arrays and column information isn't available, column names are ascending integers.

	<p>
	<strong>Note:</strong> If columns are named, then <code>data</code> must also name columns within the rows. This is intentional to
	avoid reformatting the <code>data</code> array.
	</p>

	<pre>
	&lt;sortable-table&gt;
		[[ "apple", 4, 10, 2 ],
		 [ "banana", 0, 4, 0 ],
		 [ "grape", 2, 3, 5 ],
		 [ "pear", 4, 2, 8 ],
		 [ "strawberry", 0, 14, 0 ]]
	&lt;/sortable-table&gt;
	</pre>

	<sortable-table defaultStyle>
		[[ "apple", 4, 10, 2 ],
		 [ "banana", 0, 4, 0 ],
		 [ "grape", 2, 3, 5 ],
		 [ "pear", 4, 2, 8 ],
		 [ "strawberry", 0, 14, 0 ]]
	</sortable-table>

	<index-links page="dom-elements.html"></index-links>
</body>
</html>
